<template>
	<view class="container">
		<div class="make-an-appointment">
			<view class="header-title">
				<view style="padding: 40rpx; box-sizing: border-box">
					<u--input placeholder="搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="searchValue" @change="$u.debounce(searchChange, 1000)"></u--input>
				</view>
			</view>
			<view class="list-content">
				<view class="content-box" v-for="(item, index) in copylist" :key="item.storeId"
					@click="branchCourtListClick(item)">
					<view class="img-box">
						<img :src="item.imageList[0]" alt="" />
					</view>
					<view class="right-content-box">
						<view class="h-title">
							<view style="font-weight: 600">{{ item.storeName }}</view>
							<view style="display: flex; align-items: center">
								<view><u-rate readonly active-color="#FFD600" count="5" v-model="item.score"></u-rate>
								</view>
								<view style="font-size: 24rpx">{{ item.score ? item.score : 0 }} 分</view>
							</view>
						</view>
						<view style="font-size: 24rpx"> </view>
						<view style="display: flex; justify-content: space-between">
							<view class="time-text">营业时间 {{ item.businessStartTime }} -
								{{ item.businessEndTime }}
							</view>
							<view class="frequency-text">服务人次：{{ item.serviceNum }}</view>
						</view>

						<view style="display: flex; justify-content: space-between">
							<view class="address-text text-s">
								{{ item.address }}
							</view>
							<view class="time-text text-s" v-if="item.distance">
								距离：{{ item.distance }}</view>
						</view>
						<view v-if="item.hotStoreEvaluate.content" class="hot-box-content">
							热评：{{
                item.hotStoreEvaluate.content
                  ? item.hotStoreEvaluate.content
                  : "很好，很不错！"
              }}
						</view>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import {
		storeEvaluateList
	} from "@/api/axios/CommentOn.js";
	import store from "@/store/index.js";
	export default {
		name: "MallCenter",
		data() {
			return {
				list: [],
				copylist: [],
				searchValue: "",
			};
		},
		created() {
			let _this = this;
			let mapData = store.state.mapData;
			let localCoordinate = "";
			if (mapData.location) {
				localCoordinate = mapData.location.lat + "," + mapData.location.lng;
			}
			console.log(storeEvaluateList, "storeEvaluateList");
			storeEvaluateList({
				params: {
					storeName: "",
					localCoordinate: localCoordinate,
					mode: "driving",
				},
			}).then((res) => {
				console.log(res);
				_this.list = res;
				if (res && res.length > 0) {
					res.map((item) => {
						console.log(item.images);
						item.image = item.images?.split(",")[0];
						return item;
					});
				}
				_this.copylist = res;
			});
			// wx.getFuzzyLocation({
			// 	type: 'wgs84',
			// 	success(res) {
			// 		const latitude = res.latitude
			// 		const longitude = res.longitude
			// 		console.log(res);
			// 	}
			// })
			// console.log('---------------------------------------------');
			// wx.getLocation({
			// 	type: 'wgs84',
			// 	success(res) {
			// 		const latitude = res.latitude
			// 		const longitude = res.longitude
			// 		const speed = res.speed
			// 		const accuracy = res.accuracy
			// 	}
			// })
			// console.log('---------------------------------------------');
		},
		methods: {
			branchCourtListClick(data) {
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/BranchCourtList/index?storeId=" +
						data.storeId,
				});
			},
			searchChange(e) {
				this.copylist = this.list.filter((item) => {
					if (item.storeName.indexOf(this.searchValue) >= 0) {
						return item;
					}
				});
				console.log(this.copylist);
			},
		},
	};
</script>

<style lang="scss">
	@import "index.scss";
</style>